html,body{padding:0;margin:0;height:100%;overflow:hidden;position: relative;font-family:Microsoft YaHei;}
ul,li{list-style:none;margin: 0;padding: 0;}
button,select{-webkit-appearance:none;outline:none;}
.hidden{display:none !important;}

#sample{height:100%;position:relative;}
#sample canvas{outline: none;}
.buttonGroup{min-width: 180px;padding:10px;position:absolute;top:-200px;right:0;z-index:11;transition:top 1s;}
.buttonGroup button[data-index='big']{width:50px;}
.buttonGroup button[data-index='small']{width:50px;}
.buttonGroup button[data-index='lock']{width:40px;height:40px;border-radius:25px;padding: 0 5px;}
.buttonGroup button[data-index='lock']>svg{margin:-4px 0 0 -2px;}
.buttonGroup button img{width:20px;height:20px;}

.buttonGroup1{min-width: 230px;position:absolute;top:-180px;right:10px;z-index:11;transition:top 1s;}
.buttonGroup1 .box{padding:5px 15px;padding-top:7px;border-radius: 25px;background:rgba(237,237,237,1);display:table;}
.buttonGroup1 .item{width:40px;height:40px;border-radius:20px;margin:0 10px;text-align: center;display:table-cell;}
.buttonGroup1 .item{cursor:pointer;background-size:20px 20px;background-position:center;background-repeat: no-repeat;}
.buttonGroup1 .item[data-index='big']{background-image:url("../img/flow/zoomin1.png");}
.buttonGroup1 .item[data-index='big']:hover{background-color:#fff;background-image:url("../img/flow/zoomin1-x.png");}
.buttonGroup1 .item[data-index='small']{background-image:url("../img/flow/zoomout1.png");}
.buttonGroup1 .item[data-index='small']:hover{background-color:#fff;background-image:url("../img/flow/zoomout1-x.png");}
.buttonGroup1 .item[data-index='lock']{background-image:url("../img/flow/lock.png");}
.buttonGroup1 .item[data-index='lock']:hover{background-color:#fff;background-image:url("../img/flow/lock-x.png");}
.buttonGroup1 .item[data-index='lock'].active{background-image:url("../img/flow/unlock.png");}
.buttonGroup1 .item[data-index='lock'].active:hover{background-color:#fff;background-image:url("../img/flow/unlock-x.png");}
.buttonGroup1 .item[data-index='save']{background-image:url("../img/flow/save.png");}
.buttonGroup1 .item[data-index='save']:hover{background-color:#fff;background-image:url("../img/flow/save-x.png");}


#mask{width:100%;height:100%;position:absolute;top:0;left:0;z-index:100;background-color:rgba(255,255,255,.9)}
#mask img{width: 160px;height: 160px;margin: 100px auto;display: block;}
#dialog_confirm{width: 100%;height: 100%;background-color: rgba(255,255,255,.8);position: absolute;top: 0;left: 0;z-index: 99;}
#dialog_confirm .box{width:400px;min-height:150px;background-color:white;border-radius:20px;border:2px solid;border-color:#94c7fc;margin:150px auto;}
#dialog_confirm .box .content{width:100%;height:100px;line-height:100px;text-align:center;}
#dialog_confirm .box .content .w_1{font-size:1.4rem;}
#dialog_confirm .box .button{width:100%;height:50px;text-align:center;}
#dialog_confirm .box button{height:30px;padding:3px 20px;cursor:pointer;border-radius:4px;font-size:1rem;background-color:#4285f4;}

/** Base Spec */
.v-btn {
    letter-spacing:5px;text-indent: 5px;align-items: center;border-radius:3px;-webkit-tap-highlight-color:rgba(0,0,0,0);display: inline-flex;height: 36px;flex: 0 0 auto;font-size: 14px;font-weight: 500;justify-content: center;margin: 6px 8px;
    text-transform: uppercase;text-decoration: none;transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), color 1ms; position: relative;vertical-align: middle;user-select: none;}
.v-btn:not(.lock):hover{box-shadow: 2px 3px 4px rgba(1,1,1,.3);-webkit-box-shadow: 2px 3px 4px rgba(1,1,1,.3);}
.v-btn {padding: 0 16px;cursor:pointer;}
.v-btn.success {background-color: #f39431 !important;  border-color: #f39431 !important;color: #fff;}
.v-btn.info{color:#fff;background-color: #6182fc;border-color: #6182fc;}
.v-btn.lock{background-color: #d4d4d4;color:#969696;}
.v-btn.lock.active{background-color: #6182fc;}
.v-btn.normal{background-color: rgba(221,221,221,.1);border:none;}

#theme{
    width: 80px;
    height: 34px;
    background: #fff;
    padding: 5px;
    font-size: 12px;
    border: 1px solid #ccc;
}

/* redmenu */
.radmenu {
    position: absolute;
    display: none;
    align-items: center;
    justify-content: center;
    left: 400px;
    top: 200px;
    z-index: 99;
}

.radmenu > a {
    top: calc(50% - 40px);
    left: calc(50% - 40px);
}
.radmenu > a.show {
    display: flex !important;
}
.radmenu li {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    transition: all .3s;
}
.radmenu a {
    position: absolute;
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.9);
    text-align: center;
    align-items: center;
    justify-content: center;
    border-radius: 120px;
    -webkit-appearance : none ;
    display: none;
    text-decoration: none;
    color: #333;
    transition: all 1s ease;
    box-shadow: 0 0 15px #222;
    -webkit-box-shadow:0 0 15px #222;
    font-family: "segoe ui";
    font-weight: 200;
    font-size: 16px;
}
.radmenu .selected {
    background: rgba(51, 51, 51, 0.9);
    display: flex;
    top: calc(50% - 40px);
    left: calc(50% - 40px);
    color: #f1f1f1;
    box-shadow: 0 0 10px #f1f1f1;
    -webkit-box-shadow: 0 0 10px #f1f1f1;
}
.radmenu .selected + ul > li:nth-child(1) {
    -webkit-transform: rotate(72deg) translateX(40px);
    transform: rotate(72deg) translateX(40px);
}
.radmenu .selected + ul > li:nth-child(1) > a {
    -webkit-transform: rotate(-72deg);
    transform: rotate(-72deg);
}
.radmenu .selected + ul > li:nth-child(2) {
    -webkit-transform: rotate(144deg) translateX(40px);
    transform: rotate(144deg) translateX(40px);
}
.radmenu .selected + ul > li:nth-child(2) > a {
    -webkit-transform: rotate(-144deg);
    transform: rotate(-144deg);
}
.radmenu .selected + ul > li:nth-child(3) {
    -webkit-transform: rotate(216deg) translateX(40px);
    transform: rotate(216deg) translateX(40px);
}
.radmenu .selected + ul > li:nth-child(3) > a {
    -webkit-transform: rotate(-216deg);
    transform: rotate(-216deg);
}
.radmenu .selected + ul > li:nth-child(4) {
    -webkit-transform: rotate(288deg) translateX(40px);
    transform: rotate(288deg) translateX(40px);
}
.radmenu .selected + ul > li:nth-child(4) > a {
    -webkit-transform: rotate(-288deg);
    transform: rotate(-288deg);
}
.radmenu .selected + ul > li:nth-child(5) {
    -webkit-transform: rotate(360deg) translateX(40px);
    transform: rotate(360deg) translateX(40px);
}
.radmenu .selected + ul > li:nth-child(5) > a {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
}
.radmenu .selected + ul > li > a {
    display: flex;
}


/* tips */
#tips{position:absolute;left:0;top:9999px;z-index: 99;}
#tips>.content{max-width:180px;min-height:50px;}
#tips>.content{padding:10px;border-radius:10px;-webkit-appearance:none;border:1px dashed black;color:red;background-color:rgba(255,255,255,.9);}



